<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS的继承层叠和特殊性 </title>
    <style type="text/css">
        h2 {
            color: black;
            background: green;
        }

        /*p{*/
        /*color: #0000FF;*/
        /*}*/
        .p_xzm {
            border: 2px solid red;;
            /*标签设置了边框为1像素、红色、实心边框线，而对于子元素span是没用起到作用的*/
        }

        p {
            color: red;
        }

        .first {
            color: green;
        }

        div {
            color: red;
        }

        div {
            color: gray;
        }


        h3{color:gold!important;}
        h3{color:gainsboro;}

    </style>
</head>
<body>

<!--============================分割线===============================-->
<h2> 继承性 CSS的某些样式是具有继承性的 它允许样式不仅应用于某个特定html标签元素，而且应用于其后代</h2>


<div style="background-color: #ff3b70"> 比如下面代码：如某种颜色应用于p标签，这个颜色设置不仅应用p标签，
    还应用于p标签中的所有子元素文本，这里子元素为span标签。一些css样式是不具有继承性的。如border
</div>
<p>三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>

<p class="p_xzm">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>


<!--============================分割线===============================-->
<h2> 特殊性 标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100 因为浏览器是根据权值来判断使用哪种css样式的，权值高的就使用哪种css样式。</h2>

<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>


<!--============================分割线===============================-->
<h2> 层叠 层叠就是在html文件中对于同一个元素可以有多个css样式存在，当有相同权重的样式存在时，会根据这些css样式的前后顺序来决定 </h2>。


<div class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</div>


<!--============================分割线===============================-->
<h2> 重要性  这时候我们可以使用!important来解决。</h2>。


<h3 class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</h3>

</body>
</html>